<template>
  <div class="margin-left-right-16 margin-bottom-20 margin-top-10 edit-item-textarea textarea-nomal">
    <label class="textarea-normal-label">
      {{label}}
      <tooltip-common v-if="!!getTooltips" :tooltips="getTooltips"></tooltip-common>
    </label>
    <el-input
      type="textarea"
      autosize
      v-model="modelValue"
      :rows="row"
      :placeholder="placeholder"
      :disabled="toBool(disabled)"
      @input="onChange">
    </el-input>
  </div>
</template>

<script setup lang="ts">
import TooltipCommon from './tooltip-common.vue'

interface Props {
  modelValue: string | number,
  label: string,
  tooltips?: string,
  placeholder?: string,
  row?: number,
  disabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  tooltips: '',
  placeholder: '',
  row: 3,
  disabled: false
})

const tooltips = props.tooltips
const placeholder = props.placeholder
const getTooltips = computed(() => {
  return !tooltips && placeholder ? placeholder : tooltips
})

const emit = defineEmits(['change','update:modelValue'])
const onChange = (val: string | number) => {
  emit('update:modelValue', val)
  emit('change', val)
}
const toBool = (val: boolean) => {
  return typeof val === "boolean" ? val  : val === "true" ? true : false
}
</script>

<style lang="scss">
  .textarea-nomal {
    .textarea-normal-label {
      float: left;
      margin: 0 16px 0 0;
      line-height: 40px;
      min-width: 56px;
      vertical-align: middle;
    }
  }
</style>
